<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/my.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          charset="UTF-8">
    <title></title>
</head>
<body>

    <div id="list">
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
    </div>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
<script>
    $(function(){
        if(isscroll()) {
            $(window).on('scroll',function(){

            $("#list").append(' <div class="box">item10</div>');
            });
        }

    });

    function isscroll(){
        var $box = $(".box");
        var lastboxheight = $box.last().offset().top+Math.floor($box.last().height()/2);
        var documentheight = $(document).height();
        var scroll = $(window).scrollTop();
        console.log("documentheight"+documentheight);
        console.log("scroll"+scroll);
        return lastboxheight < documentheight+scroll?true:false;
    }
</script>
</body>
</html>